<template>
  <div id="order-detail-wrapper">
    <div class="content">
      <div class="one">
        <h3>订单抬头</h3>
          <el-row class="one-one">
            <el-col :span="8"><h4>订单编号</h4></el-col>
            <el-col :span="8"><h4>订单名称</h4></el-col>
            <el-col :span="8"><h4>订单类型</h4></el-col>
          </el-row>
          <el-row class="one-one">
            <el-col :span="8"><h4>订单状态</h4></el-col>
            <el-col :span="8"><h4>失效时间</h4></el-col>
            <el-col :span="8"><h4>创建时间</h4></el-col>
          </el-row>
        <hr/>
      </div>
      <div class="two">
        <h3>交易信息</h3>
        <el-row class="one-one">
          <el-col :span="8"><h4>商家编号</h4></el-col>
          <el-col :span="8"><h4>商家名称</h4></el-col>
          <el-col :span="8"><h4>收款单位</h4></el-col>
        </el-row>
        <el-row class="one-one">
          <el-col :span="8"><h4>客户编号</h4></el-col>
          <el-col :span="8"><h4>客户名称</h4></el-col>
          <el-col :span="8"><h4>缴费方式</h4></el-col>
        </el-row>
        <hr/>
      </div>
      <div class="three">
        <h3>站点信息</h3>
        <el-row class="one-one">
          <el-col :span="8"><h4>站点编号</h4></el-col>
          <el-col :span="8"><h4>站点名称</h4></el-col>
          <el-col :span="8"><h4>发电户号</h4></el-col>
        </el-row>
        <el-row class="one-one">
          <el-col :span="8"><h4>发电户名</h4></el-col>
          <el-col :span="8"><h4>站点类型</h4></el-col>
          <el-col :span="8"><h4>电压等级</h4></el-col>
        </el-row>
        <el-row class="one-one">
          <el-col :span="8"><h4>装机容量</h4></el-col>
          <el-col :span="8"><h4>并网时间</h4></el-col>
          <el-col :span="8"><h4>抄表例日</h4></el-col>
        </el-row>
        <el-row class="one-one">
          <el-col :span="8"><h4>补贴时长</h4></el-col>
          <el-col :span="8"><h4>补贴起始日期</h4></el-col>
          <el-col :span="8"><h4>补贴单价</h4></el-col>
        </el-row>
        <el-row class="one-one">
          <el-col :span="8"><h4>站点地址</h4></el-col>
          <el-col :span="8"><h4>经纬度</h4></el-col>
        </el-row>
        <el-row class="one-one">
          <el-col :span="8"><h4>详细地址</h4></el-col>
        </el-row>
        <hr/>
      </div>
      <div class="four">
        <h3>合同信息</h3>
        <el-row class="one-one">
          <el-col :span="8"><h4>合同编号</h4></el-col>
          <el-col :span="8"><h4>合同名称</h4></el-col>
          <el-col :span="8"><h4>合同有效期</h4></el-col>
        </el-row>
        <el-row class="one-one">
          <el-col :span="8"><h4>项目编号</h4></el-col>
          <el-col :span="8"><h4>项目名称</h4></el-col>
        </el-row>
        <el-row class="one-one">
          <el-col :span="8"><h4>附件</h4></el-col>
        </el-row>
        <el-row class="one-one">
          <el-col :span="8"><h4>备注</h4></el-col>
        </el-row>
        <hr/>
      </div>
      <div class="five">
        <el-button type="primary" size="large" >返回</el-button> 
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
#order-detail-wrapper{
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; 
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: lightcoral;
  
  .content{
    display: flex;
    flex-direction: column;
    align-items: center; /* 子元素水平居中 */
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px;
    overflow: hidden;

    .one{
      width: calc(100% - 20px);
      height: 120px;
      margin-top: 20px;
      
      h3{
        margin-left: 10px;
      }
      .one-one{
        margin-top: 20px;
        margin-left: 30px;
      }
    }
    .two{
      width: calc(100% - 20px);
      height: 120px;

      h3{
        margin-left: 10px;
      }
      .one-one{
        margin-top: 20px;
        margin-left: 30px;
      }
    }
    .three{
      width: calc(100% - 20px);
      height: 260px;

      h3{
        margin-left: 10px;
      }
      .one-one{
        margin-top: 20px;
        margin-left: 30px;
      }
    }
    .four{
      width: calc(100% - 20px);
      height: 190px;
      h3{
        margin-left: 10px;
      }
      .one-one{
        margin-top: 20px;
        margin-left: 30px;
      }
    }
    .five{
      position: sticky;
      bottom: 0;
    }
  }
}

hr{
  width: 98%;
  margin-top: 20px;
  height: 2px;
  background-color: #ff6b6b;
}
</style>